<!DOCTYPE html>
<html>
<head>
    <title>less介绍</title>
    <meta charset="utf-8">
    <!--安装LESS有两个细节需要特别强调，往往很多人就是这里出错：-->
    <!--调用less样式表时，link标签的rel属性一定是“stylesheet/less”，其中“/less”不可缺少；-->
    <!--less.js脚本只能放在加载less样式的link后面，才能生效。-->
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
    <link rel="stylesheet/less" href="newless.less">
    <script src="https://cdn.bootcss.com/less.js/3.0.4/less.js" type="text/javascript"></script>
</head>

<!--混合（Mixins）：class中的class;-->
<!--参数混合（Parametric）：可以像函数一样传递参数的class;-->
<!--嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码；-->
<!--运算（Operations）：css中的数学计算；-->
<!--颜色功能（Color function）：可以编辑你的颜色；-->
<!--命名空间（Namespaces）：样式分组，从而方便被调用；-->
<!--作用域（Scope）：局部修改样式；-->
<!--JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。-->

<body>

<div class="box">
    <div class="out">
        <div class="concent">
            123
        </div>
        <div class="concent">
            456
        </div>
        <div class="concent">
            789
        </div>
        <div class="concent">
            111
        </div>
        <div class="concent">
            111
        </div>
    </div>
</div>

<div class="shops-list">

    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
          <p>
              sass比less强大。
          </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>

    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>
    <div class="goods">
        <div class="goods-top">
            <img src="1.png" alt="" >
        </div>
        <div class="goods-bottom">
            <p>
                sass比less强大。
            </p>
        </div>
    </div>

</div>
<!--LESS和Sass中的变量的唯一区别就是，LESS使用@，而Sass使用$。-->

</body>
</html>